<template>
  <div>
    <el-dialog :title="colmunName" :close-on-click-modal="false" :visible.sync="visible" center>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="input1">
            <template slot="prepend">查找</template>
          </el-input>
          <div style="height: 350px;background-color: #fff;width: 100%;padding: 10px 15px;overflow-y: auto;">
            <div v-if="!resultShow">
              <h3>警告！</h3>
              <div>值列表过大或者连续值，请不要加载数据列表!</div>
              <el-button type="warning" @click="loadValues">加载</el-button>
            </div>
            <div v-if="resultShow">
              <div v-for="(item,index) in valueData" :key="index" @dblclick="conditionPitch(item)">{{item}}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
            <el-select v-model="filterType" @change="typeChangeHandle" style="margin-bottom: 15px;">
              <el-option v-for="item in filterTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div style="margin-bottom: 15px;" v-if="filterType == '=' || filterType == '≠' || filterType == '>' || filterType == '<' || filterType == '≥' || filterType == '≤'">
              选定值
            </div>
            <div v-if="filterType == '=' || filterType == '≠'">
              <div v-if="filterList.length == 0">
                <el-input v-model="filterList[0]" class="input-with-select" style="margin: 5px 0;">
                  <el-button slot="append" icon="el-icon-delete"></el-button>
                </el-input>
              </div>
              <div v-else>
                <el-input v-for="(item,index) in filterList" v-model="filterList[index]" :key="index" class="input-with-select" style="margin: 5px 0;">
                  <el-button slot="append" icon="el-icon-delete" @click="filterItemDel(item,index)"></el-button>
                </el-input>
              </div>
            </div>
            <div v-if="filterType == '>' || filterType == '<' || filterType == '≥' || filterType == '≤'">
              <el-input v-model="filterList[0]" class="input-with-select"></el-input>
            </div>
            <div v-if="filterType == '(a,b]' || filterType == '[a,b)' || filterType == '(a,b)' || filterType == '[a,b]'">
              <div>下限</div>
              <el-input v-model="filterList[0]" class="input-with-select" style="margin: 5px 0;"></el-input>
              <div>上限</div>
              <el-input v-model="filterList[1]" class="input-with-select" style="margin: 5px 0;"></el-input>
            </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="saveFilter" v-prevent-re-click>保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getValues } from '@/api/cboard/cboard'


  export default {
    data() {
      return {
        visible: false,
        type: '',
        dataForm: {},
        colmunName: '',
        filterList: [],
        dataSetId:'',
        input1: '',
        formData: {},
        resultShow: false,
        valueData: [],
        filterType: '=',
        filterTypeOption: [
          {value: '=', label: '='},
          {value: '≠', label: '≠'},
          {value: '>', label: '>'},
          {value: '<', label: '<'},
          {value: '≥', label: '≥'},
          {value: '≤', label: '≤'},
          {value: '(a,b]', label: '(a,b]'},
          {value: '[a,b)', label: '[a,b)'},
          {value: '(a,b)', label: '(a,b)'},
          {value: '[a,b]', label: '(a,b)'}
        ]
      }
    },
    components: {},
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(type,data,setId){
        this.visible = true
        this.valueData = []
        this.type = type
        this.dataForm = data
        this.colmunName = data.col
        this.filterList = data.values
        this.dataSetId = setId
      },
      loadValues(){
        this.resultShow = true
        let formData = {
          datasetId: this.dataSetId,
          colmunName: this.colmunName
        }
        getValues(formData).then(result => {
          this.valueData = result.data
          this.dataForm.values.forEach(item => {
            this.valueData = this.valueData.filter(item1 => {
              return item1 != item
            })
          })
        })
      },
      typeChangeHandle(val){
        this.valueData = this.valueData.concat(this.filterList)
        this.filterList = []
      },
      conditionPitch(data){
        // this.filterList.push(data)
        switch(this.filterType){
          case '=': {
            this.filterList.push(data)
            break
          };
          case '≠': {
            this.filterList.push(data)
            break
          };
          case '>': {
            this.valueData.push(this.filterList[0])
            this.filterList[0] = data
            break
          };
          case '<': {
            this.valueData.push(this.filterList[0])
            this.filterList[0] = data
            break
          };
          case '≥': {
            this.valueData.push(this.filterList[0])
            this.filterList[0] = data
            break
          };
          case '≤': {
            this.valueData.push(this.filterList[0])
            this.filterList[0] = data
            break
          };
          case '(a,b]': {
            if(this.filterList.length == 0){
              this.filterList[0] = data
            }else{
              this.valueData.push(this.filterList[1])
              this.filterList[1] = data
            }
            break
          };
          case '[a,b)': {
            if(this.filterList.length == 0){
              this.filterList[0] = data
            }else{
              this.valueData.push(this.filterList[1])
              this.filterList[1] = data
            }
            break
          };
          case '(a,b)': {
            if(this.filterList.length == 0){
              this.filterList[0] = data
            }else{
              this.valueData.push(this.filterList[1])
              this.filterList[1] = data
            }
            break
          };
          case '[a,b]': {
            if(this.filterList.length == 0){
              this.filterList[0] = data
            }else{
              this.valueData.push(this.filterList[1])
              this.filterList[1] = data
            }
            break
          }
        }

        this.valueData = this.valueData.filter(item => {
          return item != data
        })
      },
      filterItemDel(data,index){
        this.filterList.splice(index,1)
        this.valueData.push(data)
      },
      saveFilter(){
        this.dataForm['type'] = this.filterType
        this.dataForm['values'] = [...this.filterList]

        this.visible = false

        this.$emit('defaultSet',{type: this.type, data: this.dataForm})
      }
    }
  }
</script>

<style>

</style>
